<template>
	<view class="check-container">
		<view class="list list2">
			<view class="list-item">
				<text style="color: red;">*</text>
				<text>业主姓名：</text>
				<input type="text" placeholder="请输入姓名" v-model="params['联系人姓名']">
			</view>
			<view class="list-item">
				<text style="color: red;">*</text>
				<text>联系电话：</text>
				<input type="number" placeholder="请输入电话号码" v-model="params['联系人电话']">
			</view>
			<view class="list-item">
				<text style="color: red;">*</text>
				<text>装修地址：</text>
				<input type="text" placeholder="请输入装修地址" v-model="params['报事位置']">
			</view>
			<view class="list-item">
				<text style="color: red;">*</text>
				<text>竣工时间：</text>
				<view :class="value == '请选择竣工时间' ? 'color':''" @click="selectDatePicker(type,index)">{{value}}</view>
				<date-time-picker ref='date-time' :indicatorStyle='indicatorStyle' :type='type' :datestring='dateString' @change='dateTimeChange'>
				</date-time-picker>
			</view>
			<view class="list-item">
				<text style="color: red;">*</text>
				<text>验收时间：</text>
				<my-picker ref="picker" :value="time" @input="pickerchange" />
				<!-- <view @click="selectDatePicker1(type,index)">{{checkTime}}</view>
				<date-time-picker ref='date-time1' :indicatorStyle='indicatorStyle' :type='type' :datestring='dateString' @change='dateTimeChange1'>
				</date-time-picker> -->
			</view>
			<view class="list-item">
				<text style="color: red;">*</text>
				<text>所属小区：</text>
				<text>{{userInfo.projName}}</text>
				<!-- <view class="type" @click="handleTap('picker')">{{label1}}</view>
				<lb-picker ref="picker" v-model="value1" mode="selector" :list="projectList" :dataset="{ name: 'label1' }" @change="handleChange"
				 @confirm="handleConfirm" @cancel="handleCancel">
				</lb-picker> -->
			</view>
		</view>
		<button class="btn" @click="handleSubmit">提交申请</button>
	</view>
</template>

<script>
	import DateTimePicker from '@/components/bory-dateTimePicker/bory-dateTimePicker.vue'
	import LbPicker from '@/components/lb-picker/index.vue'
	import dayjs from 'dayjs'
	import MyPicker from '@/myComponents/time-picker.vue'
	export default {
		props: {
			projectList: {
				type: Array,
				default: () => []
			}
		},
		components: {
			DateTimePicker,
			LbPicker,
			MyPicker
		},
		data() {
			return {
				value: '请选择竣工时间',
				value1: '',
				label1: '',
				params: {
					操作类型: 'submit',
					工单类型: 'H',
					联系人姓名: '',
					联系人电话: '',
					报事描述: '',
					装修验收工单: {
						竣工时间: ''
					},
					报事位置: '',
					上门时间: '',
					所属项目id: null,
				},
				type: 'date',
				checkTime: '请选择',
				time: '请选择上门时间',
				userInfo: {}
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.params.联系人姓名 = this.userInfo.name
			this.params.所属项目id = this.userInfo.projId
			this.params.联系人电话 = this.userInfo.mobile
		},
		computed: {
			indicatorStyle() {
				return {
					background: 'rgba(255,255,255,.1)',
					height: '40px',
				};
			}
		},
		methods: {
			pickerchange(e){
				this.time = e
				this.params.上门时间 = e
				// console.log(this.$refs.picker)
				// console.log('pickerchangeid',e);
			},
			selectDatePicker(type, index) {
				console.log('点击')
				this.type = type;
				this.index = index;
				this.$refs['date-time'].show();
			},
			dateTimeChange(value) {
				// let item = this.list[this.index];
				// item['detail'] = value;
				this.value = value
				this.params.装修验收工单.竣工时间 = dayjs(value).format('YYYY-MM-DDTHH:mm:ssZ')
				// this.list.splice(this.index, 1, item);
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleChange(e) {
				console.log('change::', e)
			},
			handleConfirm(e) {
				// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
				console.log('confirm::', e)
				if (e) {
					const name = e.dataset.name
					// this.params.所属项目id = e.item.id
					this.params.所属项目id = e.item.id
					// this.params2.所属项目id = e.item.id
					const label = e.item.label
					if (name && label) {
						this[name] = label
					}
				}
			},
			handleSubmit() {
				if(this.params.联系人姓名.trim() == ''){
					uni.showToast({
						title: '请填写业主姓名',
						icon: 'none'
					})
				}else if(this.params.联系人电话.trim() == ''){
					uni.showToast({
						title: '请填写联系电话',
						icon: 'none'
					})
				}else if(/^1[3456789]\d{9}$/.test(this.params.联系人电话) === false){
					uni.showToast({
						title: '请填写正确的手机号码',
						icon: 'none'
					})
				}else if(this.params.报事位置.trim() == ''){
					uni.showToast({
						title: '请填写装修地址',
						icon: 'none'
					})
				}else if(this.params.装修验收工单.竣工时间.trim() == ''){
					uni.showToast({
						title: '请填写竣工时间',
						icon: 'none'
					})
				}else if((new Date().getTime() - new Date(this.params.装修验收工单.竣工时间.trim()).getTime()) >= 1000*60*60*24){
					uni.showToast({
						title: '请选择正确的竣工时间',
						icon: 'none'
					})
				}else if(this.params.上门时间.trim() == ''){
					uni.showToast({
						title: '请填写验收时间',
						icon: 'none'
					})
				}else if((new Date().getTime() - new Date(this.params.上门时间.trim()).getTime()) >= 1000*60*60*24){
					uni.showToast({
						title: '请选择正确的竣工时间',
						icon: 'none'
					})
				}else {
					this.createTicket()
				}
			},
			createTicket() {
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				this.$http2.post('ticketSystem/ticket/submit', this.params).then(res => {
					console.log(res)
					if (res.code === 10000) {
						uni.redirectTo({
							url: '../success/success?path=../index/index' + '&title=返回报事页面'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.color {
		color: #777;
	}
	.check-container {
		height: 1200rpx;
	}
	.list {
		height: 1100rpx;
		.type {
			width: 540rpx;
			height: 60rpx;
			line-height: 60rpx;
			position: relative;
			&:after {
				content: '';
				position: absolute;
				transform: rotate(45deg);
				border-top: 2rpx solid #666;
				border-right: 2rpx solid #666;
				top: 14rpx;
				right: 16rpx;
				width: 24rpx;
				height: 24rpx;
			}
		}
		.list-item {
			padding-left: 18rpx;
			width: 750rpx;
			height: 88rpx;
			display: flex;
			color: #333;
			border-bottom: 2rpx solid #f5f5f5;
			align-items: center;
			background-color: #fff;
			input {
				height: 60rpx;
				// background-color: pink;
				width: 500rpx;
			}
		}
		.btn {
			width: 568rpx;
			height: 80rpx;
			color: #fff;
			font-size: 32rpx;
			background: $theme-color;
			border-radius: 8rpx;
			margin-top: 62rpx;
			margin-left: 92rpx;
		}
		.install {
			margin-top: 0;
		}
		.text {
			width: 750rpx;
			height: 190rpx;
			color: #999999;
			padding-top: 20rpx;
			padding-left: 20rpx;
			background-color: #fff;
		}
		.list-bottom {
			width: 750rpx;
			height: 310rpx;
			background-color: #fff;
			padding-top: 40rpx;
			display: flex;
			.upload-img {
				width: 230rpx;
				height: 230rpx;
				margin-left: 20rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.img-list {
				position: relative;
				image {
					width: 230rpx;
					height: 230rpx;
					margin-left: 10rpx;
				}
				.clear {
					width: 40rpx;
					height: 40rpx;
					background-color: #000;
					opacity: 0.5;
					color: #BFBFBF;
					position: absolute;
					top: 0;
					right: 0;
					font-size: 32rpx;
					text-align: center;
					line-height: 40rpx;
				}
			}
		}
		.container {
			width: 100%;
			height: 620rpx;
		}
		.renovation-notice {
			margin-top: 33rpx;
			margin-left: 179rpx;
			font-size: 26rpx;
			color: #999;
			span {
				color: #5BA1FF;
			}
		}
	}
	.list2 {
		height: 800rpx;
	}
</style>
